<template>
  <div class="product-detail">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="40" color="#fff" />
      </div>
      <div class="header-actions">
        <div class="search-icon">
          <van-icon name="search" size="40" color="#fff" />
        </div>
        <div class="message-icon" @click="goToMessage">
          <van-icon name="chat" size="40" color="#fff" />
        </div>
        <div class="favorite-icon">
          <van-icon name="star-o" size="40" color="#fff" />
        </div>
        <div class="share-icon">
          <van-icon name="share-o" size="40" color="#fff" />
        </div>
        <div class="more-icon">
          <van-icon name="ellipsis" size="40" color="#fff" />
        </div>
      </div>
    </div>

    <!-- 商品主图区域 -->
    <div class="product-image-container">
      <img :src="product.image" class="product-image" />
      <div class="image-tabs">
        <span class="tab active">图片</span>
        <span class="tab">视频</span>
        <span class="tab">直播</span>
      </div>
    </div>

    <!-- 商品信息区域 -->
    <div class="product-info">
      <div class="shop-image">
        <img :src="product.shopImage || product.image" alt="shop image" />
      </div>
      <div class="shop-info">
        <div class="product-title">
          <h1>{{ product.name }}</h1>
        </div>
        <div class="product-rating">
          <div class="rating-score">{{ product.rating }}</div>
          <div class="rating-count">{{ product.ratingCount }}+</div>
          <div class="delivery-time">约{{ product.deliveryTime }}分钟</div>
          <div class="favorite-count">好评第{{ product.favoriteRank }}名</div>
        </div>
        <div class="product-tags">
          <div class="tag">{{ product.category }}</div>
          <div class="tag">月售{{ product.monthlySales }}</div>
          <div class="tag">{{ product.deliveryArea }}</div>
        </div>
      </div>
    </div>

    <!-- 促销信息 -->
    <div class="promotions-container">
      <div class="promotion-item">
        <div class="promotion-tag">满减</div>
        <div class="promotion-text">满{{ product.minOrderAmount }}减{{ product.discount }}</div>
      </div>
      <div class="promotion-item">
        <div class="promotion-tag">新客</div>
        <div class="promotion-text">新客立减{{ product.newCustomerDiscount }}</div>
      </div>
      <div class="promotion-item">
        <div class="promotion-tag">优惠券</div>
        <div class="promotion-text">{{ product.couponDesc }}</div>
      </div>
    </div>

    <!-- 菜单导航 -->
    <div class="menu-nav">
      <div class="nav-item" 
        :class="{ active: activeTab === 'menu' }" 
        @click="switchTab('menu')">
        <span>点菜</span>
        <div class="active-line" v-if="activeTab === 'menu'"></div>
      </div>
      <div class="nav-item" 
        :class="{ active: activeTab === 'comment' }" 
        @click="switchTab('comment')">
        <span>评价</span>
        <span class="count">({{ product.commentCount }})</span>
        <div class="active-line" v-if="activeTab === 'comment'"></div>
      </div>
      <div class="nav-item" 
        :class="{ active: activeTab === 'merchant' }" 
        @click="switchTab('merchant')">
        <span>商家</span>
        <div class="active-line" v-if="activeTab === 'merchant'"></div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <div class="notice" v-if="activeTab === 'menu'">
      <span>温馨提示：请适量点餐</span>
    </div>

    <!-- 菜单区域 -->
    <div class="menu-container" v-if="activeTab === 'menu'">
      <!-- 左侧分类列表 -->
      <div class="category-list">
        <div 
          v-for="(category, index) in categories" 
          :key="index" 
          class="category-item"
          :class="{ active: currentCategoryIndex === index }"
          @click="selectCategory(index)"
        >
          <div class="category-tag" v-if="category.tag">{{ category.tag }}</div>
          <span class="category-name">{{ category.name }}</span>
        </div>
      </div>

      <!-- 右侧菜品列表 -->
      <div class="dish-list" ref="dishList" @scroll="onDishListScroll">
        <div
          v-for="(category, cIdx) in categories"
          :key="cIdx"
          :ref="'categorySection' + cIdx"
          class="category-section"
        >
          <div class="section-title">
            <div class="title-text">{{ category.name }}</div>
            <div class="subtitle" v-if="cIdx === 0">（近24小时附近有99+人下单）</div>
          </div>
          <div class="dish-items">
            <div
              v-for="dish in getDishesByCategory(cIdx)"
              :key="dish.id"
              class="dish-item"
              @click="showDishDetail(dish)"
            >
              <div class="dish-image">
                <img :src="dish.image" alt="dish image" />
              </div>
              <div class="dish-info">
                <div class="dish-name">{{ dish.name }}</div>
                <div class="dish-desc">{{ dish.description }}</div>
                <div class="dish-stats">
                  <span class="monthly-sales">月售{{ dish.monthlySales }}</span>
                  <span class="rating">{{ dish.ratingDesc }}</span>
                </div>
                <div class="dish-actions">
                  <span class="delivery-note" v-if="dish.noDelivery">单点不送</span>
                  <div class="add-button" v-else @click.stop="addDishToCart(dish)">
                    <van-icon name="plus" size="20" />
                  </div>
                </div>
                <div class="dish-price">
                  <span class="current-price">¥{{ dish.price }}</span>
                  <span class="original-price" v-if="dish.originalPrice">¥{{ dish.originalPrice }}</span>
                  <span class="discount" v-if="dish.discount">{{ dish.discount }}折</span>
                  <span class="limit" v-if="dish.limit">限{{ dish.limit }}份</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 评价区域 -->
    <div class="comment-container" v-if="activeTab === 'comment'">
      <!-- 评分统计 -->
      <div class="rating-header">
        <div class="rating-options">
          <div class="rating-option active">外卖评价</div>
          <div class="rating-option">到店评价(3.8分)</div>
        </div>
      </div>
      
      <!-- 评价分类 -->
      <div class="comment-tags">
        <div class="tag active">全部 1235</div>
        <div class="tag">最新</div>
        <div class="tag">好评 1204</div>
        <div class="tag">差评 15</div>
        <div class="tag">有图/视频 727</div>
        <div class="tag">味道赞 369</div>
        <div class="tag">推荐 59</div>
        <div class="tag">分量足 38</div>
        <div class="tag">包装好 27</div>
        <div class="tag">满意 22</div>
        <div class="tag">主食不错 12</div>
      </div>
      
      <!-- 用户评价列表 -->
      <div class="comment-list">
        <div class="comment-item">
          <div class="user-info">
            <div class="avatar">
              <img :src="require('@/assets/images/product/food.png')" alt="用户头像" />
            </div>
            <div class="user-detail">
              <div class="username">qKi537369388</div>
              <div class="comment-date">2025.05.18</div>
            </div>
            <div class="more-action">
              <van-icon name="ellipsis" />
            </div>
          </div>
          
          <div class="rating-stars">
            <van-icon name="star" color="#FFCC00" size="20" v-for="i in 5" :key="i" />
            <span class="rating-text">非常满意</span>
          </div>
          
          <div class="comment-content">
            <div class="dish-tags">
              <span class="tag"># 【商品券】招牌窑鸡（整只）</span>
              <span class="tag">#性价比高高高</span>
            </div>
            <div class="comment-text">喜欢，好吃爱吃</div>
          </div>
          
          <div class="merchant-reply">
            <div class="reply-header">商家回复(1天后)</div>
            <div class="reply-content">
              太感谢您的好评啦！能得到您对我们招牌窑鸡性价比和口味的认可，我这心里别提多高兴了。我们一直用心挑选原材料，严格把控制作工艺，就盼着能让每一位顾客都吃得满意。
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 商家区域 -->
    <div class="merchant-container" v-if="activeTab === 'merchant'">
      <!-- 商家地址 -->
      <div class="merchant-address">
        <van-icon name="location" size="22" color="#999" />
        <span>四川省泸州市江阳区华阳街道华升南路6号1号楼1100号</span>
        <van-icon name="phone" size="22" color="#333" class="phone-icon" />
      </div>
      
      <!-- 商家图片 -->
      <div class="merchant-images">
        <div class="image-item">
          <div class="image-tag">品牌故事</div>
          <img :src="require('@/assets/images/product/food.png')" alt="品牌故事" />
        </div>
        <div class="image-item">
          <div class="image-tag">门面</div>
          <img :src="require('@/assets/images/product/food1.png')" alt="门面" />
        </div>
        <div class="image-item">
          <div class="image-tag">大厅</div>
          <img :src="require('@/assets/images/product/food2.png')" alt="大厅" />
        </div>
        <div class="image-item">
          <div class="image-tag">后厨区</div>
          <img :src="require('@/assets/images/product/food3.png')" alt="后厨区" />
        </div>
      </div>
      
      <!-- 商家信息 -->
      <div class="merchant-info-list">
        <div class="info-item">
          <van-icon name="certificate" size="20" color="#666" />
          <span>查看食品安全档案</span>
          <van-icon name="arrow" size="16" color="#999" />
        </div>
        <div class="info-item">
          <van-icon name="shop" size="20" color="#666" />
          <span>查看商家青山档案</span>
          <van-icon name="arrow" size="16" color="#999" />
        </div>
        <div class="info-item">
          <van-icon name="clock" size="20" color="#666" />
          <span>配送时间：00:00-05:00,10:00-23:59</span>
        </div>
      </div>
      
      <!-- 商家服务 -->
      <div class="merchant-services">
        <div class="services-title">商家服务</div>
        <div class="services-list">
          <div class="service-item">跨天预订</div>
          <div class="service-item">金牌店铺</div>
          <div class="service-item">放心吃</div>
          <div class="service-item">青山公益</div>
          <div class="service-item">热情掌柜</div>
          <div class="service-item">食材公示</div>
        </div>
      </div>
    </div>

    <!-- 底部购物车栏 -->
    <div class="cart-bar">
      <div class="cart-icon" @click="toggleCartPopup">
        <van-icon name="shopping-cart-o" size="28" />
        <div class="cart-count" v-if="cartCount > 0">{{ cartCount }}</div>
      </div>
      <div class="cart-info">
        <div class="total-price">¥{{ totalPrice.toFixed(2) }}</div>
        <div class="delivery-fee">配送费¥{{ deliveryFee }}</div>
      </div>
      <div 
        class="checkout-button" 
        :class="{ active: cartCount > 0 }" 
        @click.stop="goToCheckout"
      >
        {{ cartCount > 0 ? '去结算' : '未选购商品' }}
      </div>
    </div>

    <!-- 购物车弹出层 -->
    <van-popup 
      v-model:show="showCartPopup" 
      position="bottom" 
      round 
      :style="{ height: '400px' }"
      class="cart-popup"
    >
      <div class="cart-popup-content">
        <div class="cart-header">
          <div class="cart-title">已加购商品</div>
          <div class="cart-actions">
            <span>共 {{cartItems.length}} 件</span>
            <span class="clear-cart" @click="clearCart">清空</span>
            <div class="close-button" @click="showCartPopup = false">
              <van-icon name="cross" size="20" />
            </div>
          </div>
        </div>

        <div class="cart-items">
          <div class="cart-item" v-for="item in cartItems" :key="item.id">
            <div class="item-info">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-price">¥{{ (item.price * item.quantity).toFixed(2) }}</div>
            </div>
            <div class="item-control">
              <div class="decrease" @click="decreaseItemQuantity(item)">
                <van-icon name="minus" size="20" />
              </div>
              <div class="quantity">{{ item.quantity }}</div>
              <div class="increase" @click="increaseItemQuantity(item)">
                <van-icon name="plus" size="20" color="#fff" />
              </div>
            </div>
          </div>
        </div>
        
        <div class="cart-notice">
          <van-icon name="info-o" size="16" color="#ff5339" />
          <span>温馨提示：请适量点餐</span>
        </div>
      </div>
    </van-popup>

    <!-- 商品详情弹窗 -->
    <van-popup 
      v-model:show="showDetail" 
      position="bottom" 
      round 
      :style="{ height: '70%' }"
      class="dish-detail-popup"
    >
      <div class="dish-detail" v-if="selectedDish">
        <div class="detail-header">
          <div class="close-button" @click="closeDetail">
            <van-icon name="cross" size="24" />
          </div>
        </div>
        <div class="detail-image">
          <img :src="selectedDish.image" alt="dish detail" />
        </div>
        <div class="detail-content">
          <h2 class="detail-name">{{ selectedDish.name }}</h2>
          <div class="detail-desc">{{ selectedDish.description }}</div>
          <div class="detail-stats">
            <span>月售{{ selectedDish.monthlySales }}</span>
            <span>{{ selectedDish.ratingDesc }}</span>
          </div>
          <div class="detail-price">
            <span class="current-price">¥{{ selectedDish.price }}</span>
            <span class="original-price" v-if="selectedDish.originalPrice">¥{{ selectedDish.originalPrice }}</span>
          </div>
          <div class="quantity-selector">
            <div class="quantity-label">购买数量</div>
            <div class="quantity-control">
              <div class="decrease" @click="decreaseQuantity">
                <van-icon name="minus" size="20" />
              </div>
              <div class="quantity">{{ quantity }}</div>
              <div class="increase" @click="increaseQuantity">
                <van-icon name="plus" size="20" />
              </div>
            </div>
          </div>
        </div>
        <div class="add-to-cart-button" @click="addToCartFromDetail">
          加入购物车 ¥{{ selectedDish.price * quantity }}
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      product: {
        id: '1',
        name: '窝鸡王（泸州万象汇店）',
        rating: 4.9,
        ratingCount: 1000,
        deliveryTime: 48,
        favoriteRank: 3,
        category: '月销',
        monthlySales: '月售',
        deliveryArea: '订单满足48分钟送达',
        minOrderAmount: 20,
        discount: 4,
        newCustomerDiscount: 4,
        couponDesc: '7.2折折扣券',
        commentCount: 1235,
        image: require('@/assets/images/product/product1.png'),
        shopImage:  require('@/assets/images/product/product1title.png')
      },
      categories: [
        { name: '收藏福利', tag: '好评如潮' },
        { name: '店家招牌', tag: '十大必点' },
        { name: '窑鸡新吃法', tag: '新品尝鲜' },
        { name: '一人吃好', tag: '一人吃好' },
        { name: '多人套餐', tag: '' },
        { name: '卤香素菜', tag: '' },
        { name: '特色卤味', tag: '' },
        { name: '靓汤主食', tag: '' },
        { name: '酒水饮料', tag: '' },
        { name: '餐具选择', tag: '' },
        { name: '品牌荣誉', tag: '' }
      ],
      currentCategoryIndex: 0,
      isManualScrolling: false,
      dishes: [
        { categoryId: 0, items: [
            { id: '1', name: '卤香菇（微辣）', description: '精选新鲜香菇，采用秘制卤汁浸泡入味，口感鲜嫩，微辣可口', image: require('@/assets/images/product/food.png'), price: 2.5, originalPrice: 13.8, discount: 1.81, limit: 1, monthlySales: 76, ratingDesc: '店内好评第2名', noDelivery: true },
            { id: '2', name: '辣椒包（限1份）', description: '精选新鲜辣椒，口感鲜辣爽口，限量供应', image: require('@/assets/images/product/food1.png'), price: 0, monthlySales: 100, ratingDesc: '11人觉得味道赞', noDelivery: true },
            { id: '3', name: '蒜瓣（限2粒）', description: '新鲜大蒜，提味解腻', image: require('@/assets/images/product/food2.png'), price: 0, monthlySales: 100, ratingDesc: '20人好评', noDelivery: true },
            { id: '4', name: '小可乐（点击右上角收藏福利）', description: '冰镇可口可乐，畅爽解渴', image: require('@/assets/images/product/food3.png'), price: 0.9, originalPrice: 6, monthlySales: 100, ratingDesc: '7人觉得分量足', noDelivery: true }
          ]
        },
        { categoryId: 1, items: [
            { id: '5', name: '招牌窑鸡（整只）', description: '口感鲜嫩，微辣可口', image: require('@/assets/images/product/food.png'), price: 22.5, originalPrice: 33.8, discount: 7.1, limit: 1, monthlySales: 176, ratingDesc: '店内好评第1名', noDelivery: false }
          ]
        },
        { categoryId: 2, items: [
            { id: '6', name: '窑鸡套餐', description: '窑鸡新吃法', image: require('@/assets/images/product/food.png'), price: 58.0, monthlySales: 132, ratingDesc: '口味赞', noDelivery: false }
          ]
        },
        { categoryId: 3, items: [
            { id: '7', name: '一人餐', description: '适合单人食用', image: require('@/assets/images/product/food1.png'), price: 26.9, monthlySales: 89, ratingDesc: '分量足', noDelivery: false }
          ]
        },
        { categoryId: 4, items: [
            { id: '8', name: '家庭套餐', description: '适合多人分享', image: require('@/assets/images/product/food2.png'), price: 99.0, monthlySales: 45, ratingDesc: '超值', noDelivery: false }
          ]
        },
        { categoryId: 5, items: [
            { id: '9', name: '素菜拼盘', description: '健康素食', image: require('@/assets/images/product/food3.png'), price: 18.0, monthlySales: 56, ratingDesc: '新鲜', noDelivery: false }
          ]
        },
        { categoryId: 6, items: [
            { id: '10', name: '卤味拼盘', description: '多种卤味', image: require('@/assets/images/product/food.png'), price: 22.0, monthlySales: 78, ratingDesc: '特色', noDelivery: false }
          ]
        },
        { categoryId: 7, items: [
            { id: '11', name: '鲜汤面', description: '营养美味', image: require('@/assets/images/product/food1.png'), price: 16.0, monthlySales: 93, ratingDesc: '热销', noDelivery: false }
          ]
        },
        { categoryId: 8, items: [
            { id: '12', name: '果汁', description: '新鲜水果制作', image: require('@/assets/images/product/food2.png'), price: 8.0, monthlySales: 120, ratingDesc: '解腻', noDelivery: false }
          ]
        },
        { categoryId: 9, items: [
            { id: '13', name: '餐具', description: '一次性餐具', image: require('@/assets/images/product/food3.png'), price: 1.0, monthlySales: 200, ratingDesc: '实用', noDelivery: false }
          ]
        },
        { categoryId: 10, items: [
            { id: '14', name: '品牌介绍', description: '了解我们的品牌故事', image: require('@/assets/images/product/food.png'), price: 0, monthlySales: 0, ratingDesc: '必看', noDelivery: true }
          ]
        }
      ],
      cartCount: 0,
      totalPrice: 0,
      deliveryFee: 5,
      showDetail: false,
      selectedDish: null,
      quantity: 1,
      showCartPopup: false,
      cartItems: [],
      activeTab: 'menu'
    }
  },
  computed: {
    ...mapState('cart', ['items']),
    cartCount() {
      console.log('Cart items in computed:', this.items);
      const count = Array.isArray(this.items) ? this.items.reduce((total, item) => total + (item.quantity || 0), 0) : 0;
      console.log('Computed cart count:', count);
      return count;
    },
    totalPrice() {
      return Array.isArray(this.items) ? this.items.reduce((total, item) => {
        const price = item.price * (item.quantity || 1);
        return total + price;
      }, 0) : 0;
    },
    cartItems() {
      return this.items;
    },
    currentCategoryDishes() {
      const categoryDishes = this.dishes.find(item => item.categoryId === this.currentCategoryIndex);
      return categoryDishes ? categoryDishes.items : [];
    }
  },
  methods: {
    ...mapActions('cart', ['addToCart', 'removeFromCart', 'clearCart']),
    goBack() {
      this.$router.go(-1);
    },
    selectCategory(index) {
      this.currentCategoryIndex = index;
      // 标记为手动滚动，忽略滚动事件
      this.isManualScrolling = true;
      // 滚动到对应分类
      this.$nextTick(() => {
        const section = this.$refs['categorySection' + index][0];
        if (section) {
          section.scrollIntoView({ behavior: 'smooth', block: 'start' });
          // 设置一个定时器，在滚动动画完成后重置标志
          setTimeout(() => {
            this.isManualScrolling = false;
          }, 500); // 滚动动画大约需要500ms
        }
      });
    },
    showDishDetail(dish) {
      this.selectedDish = dish;
      this.quantity = 1;
      this.showDetail = true;
    },
    closeDetail() {
      this.showDetail = false;
    },
    increaseQuantity() {
      this.quantity++;
    },
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--;
      }
    },
    addToCartFromDetail() {
      if (!this.selectedDish) return;
      
      this.addToCart({
        id: this.selectedDish.id,
        name: this.selectedDish.name,
        price: this.selectedDish.price,
        img: this.selectedDish.image,
        quantity: this.quantity,
        discount: this.selectedDish.discount || 0
      });
      this.showDetail = false;
    },
    getDishesByCategory(categoryIdx) {
      const found = this.dishes.find(item => item.categoryId === categoryIdx);
      return found ? found.items : [];
    },
    onDishListScroll(e) {
      // 如果是手动滚动，不处理滚动事件
      if (this.isManualScrolling) return;
      
      // 获取滚动位置和所有分类区域
      const scrollTop = e.target.scrollTop;
      const sections = this.categories.map((_, idx) => this.$refs['categorySection' + idx][0]);
      
      // 找到当前位于视窗顶部的分类
      let newCategoryIndex = 0;
      for (let i = sections.length - 1; i >= 0; i--) {
        if (sections[i].offsetTop <= scrollTop + 50) { // 给一个小阈值，提高灵敏度
          newCategoryIndex = i;
          break;
        }
      }
      
      // 只有当分类变化时才更新
      if (this.currentCategoryIndex !== newCategoryIndex) {
        this.currentCategoryIndex = newCategoryIndex;
      }
    },
    addDishToCart(dish) {
      this.addToCart({
        id: dish.id,
        name: dish.name,
        price: dish.price,
        img: dish.image,
        quantity: 1,
        discount: dish.discount || 0
      });
    },
    toggleCartPopup() {
      this.showCartPopup = !this.showCartPopup;
    },
    decreaseItemQuantity(item) {
      this.removeFromCart(item.id);
    },
    increaseItemQuantity(item) {
      this.addToCart({
        id: item.id,
        name: item.name,
        price: item.price,
        quantity: 1
      });
    },
    switchTab(tab) {
      this.activeTab = tab;
    },
    goToMessage() {
      this.$router.push('/message');
    },
    goToCheckout() {
      console.log('Current route:', this.$route.path);
      console.log('Cart items when checking out:', this.items);
      const currentCount = Array.isArray(this.items) ? this.items.reduce((total, item) => total + (item.quantity || 0), 0) : 0;
      console.log('Cart count when checking out:', currentCount);
      
      if (currentCount > 0) {
        console.log('Attempting to navigate to payment page');
        // 使用 nextTick 确保状态更新后再导航
        this.$nextTick(() => {
          this.$router.push('/payment').catch(err => {
            console.error('Navigation failed:', err);
            // 如果常规导航失败，尝试直接修改 hash
            window.location.hash = '#/payment';
          });
        });
      } else {
        console.log('Cart is empty, not navigating');
      }
    }
  }
}
</script>

<style lang="less" scoped>
.product-detail {
  width: 750px;
  margin: 0 auto;
  background-color: #f5f5f5;
  min-height: 100vh;
  position: relative;
  padding-bottom: 120px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
  margin-bottom: 35px;
  
  .back-button {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .header-actions {
    display: flex;
    align-items: center;
    
    .search-icon,
    .message-icon,
    .favorite-icon,
    .share-icon,
    .more-icon {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20px;
    }
  }
}

.product-image-container {
  width: 100%;
  height: 390px;
  position: relative;
  margin-bottom: 40px;  
  padding-top: 82px;
  background: linear-gradient(to bottom, #662020, #ffffff);
  
  .product-image {
    width: 695px;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
    margin: 0 auto;
    display: block;
  }
  
  .image-tabs {
    position: absolute;
    bottom: 20px;
    right: 50px;
    display: flex;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    padding: 5px;
    
    .tab {
      padding: 5px 15px;
      color: #fff;
      font-size: 24px;
      
      &.active {
        background-color: #fff;
        color: #333;
        border-radius: 15px;
      }
    }
  }
}

.product-info {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 20px;
  height: 150px;
  display: flex;
  
  .shop-image {
    width: 145px;
    height: 145px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 20px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .shop-info {
    flex: 1;
    
    .product-title {
      h1 {
        font-size: 40px;
        font-weight: bold;
        margin: 0 0 24px 0;
      }
    }
    
    .product-rating {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      
      .rating-score {
        font-size: 32px;
        font-weight: bold;
        color: #ff5339;
        margin-right: 10px;
      }
      
      .rating-count,
      .delivery-time,
      .favorite-count {
        font-size: 26px;
        color: #666;
        margin-right: 20px;
        position: relative;
        padding-right: 20px;
        
        &:not(:last-child)::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 1px;
          height: 20px;
          background-color: #ddd;
        }
      }
    }
    
    .product-tags {
      display: flex;
      margin-bottom: 20px;
      
      .tag {
        font-size: 24px;
        color: #666;
        margin-right: 20px;
      }
    }
  }
}

.promotions-container {
  background-color: #fff;
  padding: 20px 30px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
    align-items: flex-start;
  .promotion-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .promotion-tag {
      font-size: 22px;
      color: #fff;
      background-color: #ff5339;
      padding: 5px 10px;
      border-radius: 4px;
      margin-right: 10px;
    }
    
    .promotion-text {
      font-size: 26px;
      color: #333;
    }
  }
}

.menu-nav {
  display: flex;
  background-color: #fff;
  padding: 0 30px;
  height: 88px;
  border-bottom: 1px solid #f0f0f0;
  
  .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
    font-size: 28px;
    color: #333;
    
    .count {
      font-size: 24px;
      color: #999;
      margin-left: 5px;
    }
    
    &.active {
      color: #000;
      font-weight: bold;
      
      .active-line {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background-color: #972e2b;
        border-radius: 2px;
      }
    }
  }
}

.notice {
  padding: 20px 30px;
  font-size: 24px;
  color: #999;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.menu-container {
  display: flex;
  height: auto;
  min-height: 600px;
  background-color: #fff;
  
  .category-list {
    width: 160px;
    background-color: #f8f8f8;
    overflow-y: auto;
    
    .category-item {
      padding: 30px 20px;
      font-size: 23px;
      color: #777779;
      font-weight: normal;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      &.active {
        background-color: #fff;
        color: #bf3130;
        font-weight: bold;
        
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 30px;
          background-color: #bf3130;
        }
      }
      
      .category-tag {
        font-size: 20px;
        color: #fff;
        background: #b60702;
        padding: 2px 8px;
        border-radius: 10px;
        margin-bottom: 5px;
      }
    }
  }
  
  .dish-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    background-color: #fff;
    height: calc(100vh ); // 视口高度-顶部-底部
    
    .section-title {
      padding: 20px 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f5f5f5;
      
      .title-text {
        font-size: 28px;
        font-weight: bold;
        color: #333;
        margin-right: 10px;
      }
      
      .subtitle {
        font-size: 24px;
        color: #999;
      }
    }
    
    .dish-items {
      .dish-item {
        display: flex;
        padding: 30px 0;
        border-bottom: 1px solid #f5f5f5;
        
        .dish-image {
          width: 160px;
          height: 160px;
          margin-right: 20px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
          }
        }
        
        .dish-info {
          flex: 1;
          position: relative;
          
          .dish-name {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
          }
          
          .dish-desc {
            font-size: 24px;
            color: #ff5339;
            margin-bottom: 10px;
          }
          
          .dish-stats {
            font-size: 22px;
            color: #999;
            margin-bottom: 15px;
            
            .monthly-sales {
              margin-right: 20px;
            }
          }
          
          .dish-actions {
            position: absolute;
            right: 0;
            bottom: 0;
            
            .delivery-note {
              font-size: 22px;
              color: #999;
            }
            
            .add-button {
              width: 50px;
              height: 50px;
              background-color: #b60702;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              .van-icon {
                color: #fff !important;
              }
            }
          }
          
          .dish-price {
            display: flex;
            align-items: center;
            
            .current-price {
              font-size: 32px;
              font-weight: bold;
              color: #ff5339;
              margin-right: 10px;
            }
            
            .original-price {
              font-size: 24px;
              color: #999;
              text-decoration: line-through;
              margin-right: 10px;
            }
            
            .discount {
              font-size: 22px;
              color: #ff5339;
              margin-right: 10px;
            }
            
            .limit {
              font-size: 22px;
              color: #999;
            }
          }
        }
      }
    }
  }
}

.cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 99;
  
  .cart-icon {
    width: 100px;
    height: 100px;
    background-color: #f8f8f8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    position: relative;
    transform: translateY(-20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
    .cart-count {
      position: absolute;
      top: 0;
      right: 0;
      background-color: #ff5339;
      color: #fff;
      font-size: 20px;
      min-width: 36px;
      height: 36px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 6px;
    }
  }
  
  .cart-info {
    flex: 1;
    
    .total-price {
      font-size: 32px;
      font-weight: bold;
      color: #333;
    }
    
    .delivery-fee {
      font-size: 22px;
      color: #999;
    }
  }
  
  .checkout-button {
    width: 200px;
    height: 70px;
    background-color: #ccc;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    cursor: pointer;
    user-select: none;
    
    &.active {
      background-color: #ff5339;
    }
    
    &:active {
      opacity: 0.9;
    }
  }
}

.dish-detail-popup {
  .dish-detail {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .detail-header {
      padding: 20px;
      text-align: right;
      
      .close-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
      }
    }
    
    .detail-image {
      height: 400px;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .detail-content {
      flex: 1;
      padding: 30px;
      overflow-y: auto;
      
      .detail-name {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 20px;
      }
      
      .detail-desc {
        font-size: 26px;
        color: #666;
        margin-bottom: 20px;
      }
      
      .detail-stats {
        font-size: 24px;
        color: #999;
        margin-bottom: 20px;
        
        span {
          margin-right: 20px;
        }
      }
      
      .detail-price {
        margin-bottom: 30px;
        
        .current-price {
          font-size: 36px;
          font-weight: bold;
          color: #ff5339;
          margin-right: 10px;
        }
        
        .original-price {
          font-size: 26px;
          color: #999;
          text-decoration: line-through;
        }
      }
      
      .quantity-selector {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .quantity-label {
          font-size: 28px;
          color: #333;
        }
        
        .quantity-control {
          display: flex;
          align-items: center;
          
          .decrease,
          .increase {
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .quantity {
            width: 60px;
            text-align: center;
            font-size: 28px;
          }
        }
      }
    }
    
    .add-to-cart-button {
      height: 100px;
      background-color: #ff5339;
      color: #fff;
      font-size: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.cart-popup {
  .cart-popup-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    
    .cart-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      border-bottom: 1px solid #f0f0f0;
      padding-bottom: 15px;
      
      .cart-title {
        font-size: 32px;
        font-weight: bold;
      }
      
      .cart-actions {
        display: flex;
        align-items: center;
        
        span {
          font-size: 24px;
          color: #999;
          margin-right: 20px;
        }
        
        .clear-cart {
          font-size: 24px;
          color: #ff5339;
          cursor: pointer;
        }
        
        .close-button {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.1);
        }
      }
    }
    
    .cart-items {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 20px;
      
      .cart-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #f6f6f6;
        
        .item-info {
          flex: 1;
          
          .item-name {
            font-size: 28px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
          }
          
          .item-price {
            font-size: 30px;
            font-weight: bold;
            color: #ff5339;
          }
        }
        
        .item-control {
          display: flex;
          align-items: center;
          
          .decrease,
          .increase {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          
          .decrease {
            border: 1px solid #ddd;
            color: #666;
          }
          
          .increase {
            background-color: #ff5339;
            color: white;
          }
          
          .quantity {
            width: 60px;
            text-align: center;
            font-size: 28px;
          }
        }
      }
    }
    
    .cart-notice {
      background-color: #fff5f5;
      border-radius: 8px;
      padding: 12px;
      display: flex;
      align-items: center;
      font-size: 24px;
      color: #ff5339;
      
      .van-icon {
        margin-right: 10px;
      }
    }
  }
}

.comment-container {
  background-color: #fff;
  
  .rating-header {
    padding: 20px;
    border-bottom: 1px solid #f6f6f6;
    
    .rating-options {
      display: flex;
      
      .rating-option {
        font-size: 28px;
        color: #999;
        padding: 0 20px;
        position: relative;
        
        &:first-child {
          padding-left: 0;
          
          &.active {
            color: #333;
            font-weight: bold;
            
          
          }
        }
        
        &:not(:first-child) {
          &.active {
            color: #333;
            font-weight: bold;
          }
        }
        
        &:not(:last-child):after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 24px;
          width: 1px;
          background-color: #ddd;
        }
      }
    }
  }
  
  .comment-tags {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
    .tag {
      padding: 8px 16px;
      background-color: #f8f8f8;
      border-radius: 24px;
      font-size: 24px;
      color: #666;
      
      &.active {
        background-color: #b50000;
        color: #fff;
      }
    }
  }
  
  .comment-list {
    padding: 0 20px 20px;
    
    .comment-item {
      padding: 20px 0;
      border-bottom: 1px solid #f6f6f6;
      
      .user-info {
        display: flex;
        margin-bottom: 15px;
        
        .avatar {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 10px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        
        .user-detail {
          flex: 1;
          
          .username {
            font-size: 26px;
            color: #333;
            font-weight: bold;
          }
          
          .comment-date {
            font-size: 22px;
            color: #999;
          }
        }
        
        .more-action {
          padding: 10px;
        }
      }
      
      .rating-stars {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        
        .rating-text {
          font-size: 24px;
          color: #666;
          margin-left: 10px;
        }
      }
      
      .comment-content {
        margin-bottom: 15px;
        
        .dish-tags {
          margin-bottom: 10px;
          
          .tag {
            display: inline-block;
            font-size: 24px;
            color: #ff5339;
            margin-right: 10px;
          }
        }
        
        .comment-text {
          font-size: 28px;
          color: #333;
          line-height: 1.5;
        }
      }
      
      .merchant-reply {
        background-color: #f8f8f8;
        padding: 15px;
        border-radius: 10px;
        
        .reply-header {
          font-size: 24px;
          color: #999;
          margin-bottom: 10px;
        }
        
        .reply-content {
          font-size: 26px;
          color: #666;
          line-height: 1.5;
        }
      }
    }
  }
}

.merchant-container {
  background-color: #fff;
  padding-bottom: 20px;
  
  .merchant-address {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f6f6f6;
    
    .van-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    span {
      flex: 1;
      font-size: 26px;
      color: #333;
      margin: 0 10px;
      line-height: 1.5;
    }
    
    .phone-icon {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .merchant-images {
    display: flex;
    padding: 20px;
    overflow-x: auto;
    gap: 10px;
    
    .image-item {
      width: 220px;
      height: 160px;
      flex-shrink: 0;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      
      .image-tag {
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 22px;
        padding: 5px 10px;
      }
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  
  .merchant-info-list {
    .info-item {
      display: flex;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid #f6f6f6;
      
      span {
        flex: 1;
        font-size: 26px;
        color: #333;
        margin-left: 10px;
      }
    }
  }
  
  .merchant-services {
    padding: 20px;
    
    .services-title {
      font-size: 30px;
      font-weight: bold;
      color: #333;
      margin-bottom: 20px;
    }
    
    .services-list {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      
      .service-item {
        padding: 8px 16px;
        background-color: #f8f8f8;
        border-radius: 6px;
        font-size: 24px;
        color: #666;
      }
    }
  }
}
</style> 